import React, { useRef, useEffect, useState, ReactNode } from "react";
import { gsap } from "gsap";
import styles from "./index.module.scss";

interface ImageAnimateProps {
  children: ReactNode;
  scale?: number;
  duration?: number;
  ease?: string;
  borderWidth?: number;
  borderColor?: string;
  effect?: "scale" | "mouseFollow" | "positionScale" | "all";
}

export default function ImageAnimate({
  children,
  scale = 1.12,
  duration = 0.8,
  ease = "power2.out",
  borderWidth = 2,
  borderColor = "#ffffff",
  effect = "all"
}: ImageAnimateProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
    const container = containerRef.current;
    const image = imageRef.current;
    
    if (!container || !image) return;

    // 创建GSAP时间轴
    const tl = gsap.timeline({ paused: true });

    // 基础缩放动画
    tl.to(image, {
      scale: scale,
      duration: duration,
      ease: ease
    });

    // 根据效果类型设置不同的动画
    switch (effect) {
      case "mouseFollow":
        const handleMouseMove = (e: MouseEvent) => {
          const rect = container.getBoundingClientRect();
          const x = (e.clientX - rect.left) / rect.width;
          const y = (e.clientY - rect.top) / rect.height;
          
          setMousePosition({ x, y });
          
          gsap.to(image, {
            x: (x - 0.5) * 20,
            y: (y - 0.5) * 20,
            duration: 0.4,
            ease: "power2.out"
          });
        };

        const handleMouseLeave = () => {
          gsap.to(image, {
            x: 0,
            y: 0,
            duration: 0.4,
            ease: "power2.out"
          });
        };

        container.addEventListener("mousemove", handleMouseMove);
        container.addEventListener("mouseleave", handleMouseLeave);
        
        return () => {
          container.removeEventListener("mousemove", handleMouseMove);
          container.removeEventListener("mouseleave", handleMouseLeave);
        };

      case "positionScale":
        const handlePositionScaleEnter = (e: MouseEvent) => {
          setIsHovered(true);
          const rect = container.getBoundingClientRect();
          const x = (e.clientX - rect.left) / rect.width;
          const y = (e.clientY - rect.top) / rect.height;
          
          // 根据鼠标位置设置变换原点
          gsap.set(image, {
            transformOrigin: `${x * 100}% ${y * 100}%`
          });
          
          tl.play();
        };

        const handlePositionScaleLeave = () => {
          setIsHovered(false);
          tl.reverse();
        };

        container.addEventListener("mouseenter", handlePositionScaleEnter);
        container.addEventListener("mouseleave", handlePositionScaleLeave);
        
        return () => {
          container.removeEventListener("mouseenter", handlePositionScaleEnter);
          container.removeEventListener("mouseleave", handlePositionScaleLeave);
        };

      case "scale":
        const handleScaleEnter = () => {
          setIsHovered(true);
          tl.play();
        };

        const handleScaleLeave = () => {
          setIsHovered(false);
          tl.reverse();
        };

        container.addEventListener("mouseenter", handleScaleEnter);
        container.addEventListener("mouseleave", handleScaleLeave);
        
        return () => {
          container.removeEventListener("mouseenter", handleScaleEnter);
          container.removeEventListener("mouseleave", handleScaleLeave);
        };

      case "all":
        const handleAllEnter = (e: MouseEvent) => {
          setIsHovered(true);
          const rect = container.getBoundingClientRect();
          const x = (e.clientX - rect.left) / rect.width;
          const y = (e.clientY - rect.top) / rect.height;
          
          // 设置变换原点并播放动画
          gsap.set(image, {
            transformOrigin: `${x * 100}% ${y * 100}%`
          });
          
          tl.play();
        };

        const handleAllLeave = () => {
          setIsHovered(false);
          tl.reverse();
        };

        container.addEventListener("mouseenter", handleAllEnter);
        container.addEventListener("mouseleave", handleAllLeave);
        
        return () => {
          container.removeEventListener("mouseenter", handleAllEnter);
          container.removeEventListener("mouseleave", handleAllLeave);
        };
    }
  }, [scale, duration, ease, effect]);

  return (
    <div 
      ref={containerRef}
      className={styles.imageAnimateContainer}
      style={{
        border: `${borderWidth}px solid ${borderColor}`,
        overflow: "hidden"
      }}
    >
      <div 
        ref={imageRef}
        className={styles.imageWrapper}
      >
        {children}
      </div>
    </div>
  );
}